<template>
    <div class="template-selection-page">
      <el-page-header @back="goBack" content="创建新网站"></el-page-header>
  
      <div class="header">
        <h2>请选择一个模板</h2>
        <p>请随意选择，模板选择后可随时互换</p>
      </div>
  
      <el-tabs v-model="activeName" type="card" @tab-click="filterTemplates">
        <el-tab-pane
          v-for="category in categories"
          :key="category.name"
          :label="category.label"
          :name="category.name"
        >
          <div class="template-grid">
            <div
              v-for="item in filteredTemplates"
              :key="item.id"
              @click="showForm(item)"
              class="template-item"
            >
              <el-image :src="item.sitePic.replace('dist/', '')"></el-image>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane disabled>
          <span slot="label">
            <el-dropdown @command="filterByDropdown">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="option in moreOptions"
                  :key="option"
                  :command="option"
                  :class="{ selected: option === currentOption }"
                >
                  {{ option }}
                </el-dropdown-item>
                <div class="suggestion">
                  <a href="http://www.baidu.com"
                    >找不到你想要的分类？请告诉我们你的建议！</a
                  >
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </el-tab-pane>
      </el-tabs>
  
      <el-dialog title="设置" :visible.sync="dialogFormVisible">
        <el-form
          ref="form"
          :model="websiteInfo"
          label-width="100px"
          :rules="rules"
        >
          <el-form-item prop="siteLogo" label="Logo：">
            <el-input
              v-model.trim="websiteInfo.siteLogo"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item prop="siteName" label="网站名：">
            <el-input
              v-model.trim="websiteInfo.siteName"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item prop="sitePic" label="网站图片：">
            <el-input
              v-model.trim="websiteInfo.sitePic"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item prop="siteUrl" label="网站模板：">
            <el-input
              v-model.trim="websiteInfo.siteUrl"
              style="width: 80%"
              :disabled="isSiteUrlDisabled"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog">取消</el-button>
          <el-button type="primary" @click="submitDialog">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { addSite } from "@/api/api.js";
  
  export default {
    data() {
      return {
        activeName: "all",
        dialogFormVisible: false,
        websiteList: [
          {
            id: 0,
            sitePic:
              "https://cdn4.codesign.qq.com/prototypes/2024/03/13/1DWk924J7D1Q030GnMm13/biktvbfj0vgyvjlx/ef7d0ccb719e8f2e151ad81a49b23946.svg",
            siteUrl: "",
            siteType: "first",
          },
          {
            id: 1,
            sitePic: "dist/template/艾三维技术/image.png",
            siteUrl: "dist/template/艾三维技术/index.html",
            siteType: "公司/项目",
          },
          {
            id: 3,
            sitePic: "dist/template/shangcheng/image.png",
            siteUrl: "dist/template/shangcheng/index.html",
            siteType: "商店",
          },
          {
            id: 4,
            sitePic: "dist/template/Bentley市政/image.png",
            siteUrl: "dist/template/Bentley市政/index.html",
            siteType: "公司企业",
          },
          {
            id: 7,
            sitePic: "dist/template/Bentley市政/other/image.png",
            siteUrl: "dist/template/Bentley市政/other/index.html",
            siteType: "模板内页",
          },
          {
            id: 5,
            sitePic: "dist/template/maze/image.png",
            siteUrl: "dist/template/maze/index.html",
            siteType: "公司企业",
          },
          {
            id: 6,
            sitePic: "dist/template/maze/other/image.png",
            siteUrl: "dist/template/maze/other/index.html",
            siteType: "模板内页",
          },
          {
            id: 2,
            sitePic: "dist/template/Bentley市政行业/image.png",
            siteUrl: "dist/template/Bentley市政行业/index.html",
            siteType: "公司企业",
          },
        ],
        websiteInfo: { siteLogo: "", siteName: "", sitePic: "", siteUrl: "" },
        rules: {
          siteLogo: [
            { required: true, message: "Logo不能为空", trigger: "blur" },
          ],
          siteName: [
            { required: true, message: "网站名不能为空", trigger: "blur" },
          ],
          sitePic: [
            { required: true, message: "网站图片不能为空", trigger: "blur" },
          ],
          siteUrl: [
            { required: true, message: "网站链接不能为空", trigger: "blur" },
          ],
        },
        categories: [
          { name: "all", label: "全部" },
          { name: "公司/项目", label: "公司/项目" },
          { name: "公司企业", label: "公司企业" },
          { name: "初创公司", label: "初创公司" },
          { name: "工作室", label: "工作室" },
          { name: "个人作品集", label: "个人作品集" },
          { name: "商店", label: "商店" },
        ],
        moreOptions: [
          "博客",
          "情人节",
          "餐饮",
          "模板内页",
          "外贸",
          "酒店服务",
          "社区服务",
          "工业制造",
          "家政服务",
          "社会公益",
          "母婴保健",
          "健康与美容",
          "旅游出行",
          "家居与生活",
          "创意设计",
          "教育培训",
          "活动交流",
          "空白模板",
        ],
        currentOption: "",
        filteredTemplates: [],
        isSiteUrlDisabled: false,
      };
    },
    created() {
      this.filterTemplates({ name: this.activeName });
    },
    methods: {
      // 根据tab筛选模板
      filterTemplates(tab) {
        if (tab.name === "all") {
          this.filteredTemplates = this.websiteList;
        } else {
          this.filteredTemplates = this.websiteList.filter(
            (item) => item.siteType === tab.label
          );
        }
      },
      // 根据下拉框筛选模板
      filterByDropdown(command) {
        // 下拉框选中值后，tab不选中值
        this.activeName = "all";
  
        // 当前选中的选项，用于修改选中item的样式
        this.currentOption = command;
  
        // 根据选中的选项筛选模板
        this.filteredTemplates = this.websiteList.filter(
          (item) => item.siteType === command
        );
      },
      // 显示弹出框
      showForm(item) {
        this.websiteInfo = { ...item };
        this.isSiteUrlDisabled = !!item.siteUrl;
        this.dialogFormVisible = true;
      },
      goBack() {
        this.$router.go(-1);
      },
      cancelDialog() {
        this.dialogFormVisible = false;
      },
      async submitDialog() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            try {
              const res = await addSite(this.websiteInfo);
              this.$message({
                message: res.data.result,
                type: res.data.code === 200 ? "success" : "error",
              });
              if (res.data.code === 200) this.goBack();
            } catch (error) {
              console.error(error);
            } finally {
              this.dialogFormVisible = false;
            }
          } else {
            this.$message({ message: "请填写完整", type: "error" });
          }
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .template-selection-page {
    text-align: center;
    margin: 20px;
  }
  
  .header h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .header p {
    font-size: 14px;
    color: #888;
    margin: 15px 0;
  }
  
  .category-tabs {
    margin-bottom: 20px;
  }
  
  :deep(.el-tabs__header) {
    border: none;
    .el-tabs__nav-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
      .el-tabs__nav-scroll {
        border: 1px solid #797979;
        border-radius: 9999px;
      }
    }
    .el-tabs__nav {
      border: none;
    }
    .el-tabs__item {
      border: none;
    }
    .el-tabs__item:hover {
      color: #6e5eff;
    }
    .el-tabs__item.is-active {
      color: #6e5eff;
    }
  }
  
  .el-dropdown-link {
    cursor: pointer;
    color: #303133;
  }
  .el-dropdown-link:hover {
    color: #6e5eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  
  .el-dropdown-menu {
    width: 670px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 5px;
    text-align: left;
    .el-dropdown-item {
      font-size: 16px;
      color: #303133;
      &:hover {
        background-color: #f5f5f5;
        color: #6e5eff;
      }
    }
    .el-dropdown-menu__item {
      line-height: 25px;
      .el-menu-item {
        padding: 0;
      }
    }
    .suggestion {
      display: block;
      text-align: left;
      margin: 10px 20px;
      font-size: 14px;
      grid-column: 1 / -1;
      a {
        text-decoration: none;
        color: #6e5eff;
      }
    }
  }
  
  .selected {
    color: #6e5eff;
  }
  
  .template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    justify-items: center;
    justify-content: space-around;
    gap: 20px 30px;
  }
  
  .template-item {
    width: 300px;
    height: 170px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  </style>
  